﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "微软雅黑","microsoft yahei",verdana,lucida,arial,sans-serif,"黑体";
        }

        .tab {
            padding: 10px;
        }

            .tab .hd {
                list-style: none;
                overflow: auto;
            }

                .tab .hd li {
                    float: left;
                    cursor: pointer;
                    padding: 5px 20px 5px 20px;
                    border: 1px solid #4888B8;
                    margin-left: -1px;
                }

                    .tab .hd li:first-child {
                        border-radius: 4px 0 0 0px;
                        margin-left: 0px;
                    }

                    .tab .hd li:last-child {
                        border-radius: 0 4px 0px 0;
                    }

                .tab .hd .active {
                    background: #4888B8;
                    color: #fff;
                }

            .tab .bd {
                list-style: none;
                margin-top: -1px;
            }

                .tab .bd li {
                    border: 1px solid #4888B8;
                    height: 80px;
                    width: 520px;
                }

        #divTab2 .on {
            background: #4f714e;
            color: #fff;
        }
    </style>
    <script>
        $(function () {
            //默认: {event: "click", active: ".active" }
            $("#divTab").tabs();

            $("#divTab2").tabs({ event: "mouseenter", active: ".on" });
        });

        (function ($) {
            $.fn.tabs = function (options) {
                $.fn.tabs.defaults = { event: "click", active: ".active" };

                return this.each(function () {
                    var opts = $.extend({}, $.fn.tabs.defaults, options || {});
                    var actClsName = opts.active.substring(1);
                    var tabNav = $(this);
                    var tabCon = tabNav.next();

                    var actIndex = tabNav.children(opts.active).index();
                    actIndex = actIndex == -1 ? 0 : actIndex;
                    tabNav.children().eq(actIndex).addClass(actClsName);
                    tabCon.children().eq(actIndex).siblings().hide();

                    tabNav.children().on(opts.event, function () {
                        $(this).siblings().removeClass(actClsName);
                        $(this).addClass(actClsName);
                        tabCon.children(":visible").hide();
                        tabCon.children(":eq(" + $(this).index() + ")").show();
                    });
                });
            };

        })(jQuery);
    </script>
</head>
<body>
    <div class="tab">
        <ul id="divTab" class="hd">
            <li>中国</li>
            <li>民营企业</li>
            <li>联想夺第一</li>
        </ul>
        <ul class="bd">
            <li>2016中国民营企业500强发布会在北京召开</li>
            <li>中国民营企业500强发布，华为超联想夺第一</li>
            <li>运通集团创立于20世纪80年代，成立于黑龙江哈尔滨市，20余年来运通致力于汽车行业的发展</li>
        </ul>
    </div>
    <div class="tab">
        <ul id="divTab2" class="hd">
            <li>中国</li>
            <li>民营企业</li>
            <li>联想夺第一</li>
        </ul>
        <ul class="bd">
            <li>2016中国民营企业500强发布会在北京召开</li>
            <li>中国民营企业500强发布，华为超联想夺第一</li>
            <li>运通集团创立于20世纪80年代，成立于黑龙江哈尔滨市，20余年来运通致力于汽车行业的发展</li>
        </ul>
    </div>
</body>
</html>
